<template>
  <div>
    <div class="topologyManageTab">
      <vToolBar
        :tableColumns="tableColumns"
        :tableData="tableData"
        :tableDataFields="tableDataFieldsFn"
        @exportData="exportData"
        @changeLie="getChangeLie"
        fileName="拓扑管理"
        @handleAdd="handleAdd"
      ></vToolBar>
    </div>

    <div class="topologyManageCon">
      <el-table :data="tableData" style="width: 100%" :fit="true">
        <!-- <el-table-column align="center" prop="date" label="项目">
        </el-table-column>
        <el-table-column align="center" label="交换机">
          <el-table-column prop="name" align="center" label="交换机">
          </el-table-column>
          <el-table-column prop="name" align="center" label="网口">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="服务器">
          <el-table-column prop="name" align="center" label="服务器">
          </el-table-column>
          <el-table-column prop="name" align="center" label="网口">
          </el-table-column>
          <el-table-column prop="name" align="center" label="HBA">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="SAN交换机">
          <el-table-column prop="name" align="center" label="SAN交换机">
          </el-table-column>
          <el-table-column prop="name" align="center" label="光口(接HBA卡)">
          </el-table-column>
          <el-table-column prop="name" align="center" label="光口(接存储)">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="存储">
          <el-table-column prop="name" align="center" label="存储">
          </el-table-column>
          <el-table-column prop="name" align="center" label="光口">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <el-button type="warning">编辑</el-button>
          <el-button type="danger">删除</el-button>
        </el-table-column> -->
        <template v-for="item in tableColumns">
          <template v-if="item.format == 'handleRow'">
            <el-table-column
              align="center"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              v-if="item.isShow"
              :key="item.prop"
            >
              <el-button type="warning">编辑</el-button>
              <el-button type="danger">删除</el-button>
            </el-table-column>
          </template>
          <template v-else-if="item.format == 'PROJECT'">
            <el-table-column
              align="center"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              v-if="item.isShow"
              :key="item.prop"
            >
              <template v-slot="scope">
                {{ scope.row[item.prop] }}
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column
              align="center"
              :label="item.label"
              :width="item.width"
              v-if="item.isShow"
              :key="item.prop"
            >
              <template v-for="cTtem in item.children">
                <el-table-column
                  align="center"
                  :label="cTtem.label"
                  :width="cTtem.width"
                  v-if="cTtem.isShow"
                  :key="cTtem.prop"
                >
                  <template v-slot="cScope">
                    {{ cScope.row[cTtem.prop] }}
                  </template></el-table-column
                >
              </template>
            </el-table-column>
          </template>
        </template>
      </el-table>
      <v-pagination
        :dataTotal="dataTotal"
        :curPage="curPage"
        :pageSize="pageSize"
        @getCurPage="getPaginationCurPage"
        @getPageSize="getPaginationPageSize"
      >
      </v-pagination>
    </div>
  </div>
</template>

<script>
import vPagination from "common/Pagination.vue";
import tableColumns from "./TopologyManageItemColumns";
import vToolBar from "../menuComponent/toolBar/TopologyManageToolBar.vue";
export default {
  components: {
    vPagination,
    vToolBar,
  },
  data() {
    return {
      tableData: [
        {
          PROJECT: "PROJECT",
          SWITCHNAME: "SWITCHNAME",
          SWITCHPORT: "SWITCHPORT",
          SERVICESNAME: "SERVICESNAME",
          SERVICESPORT: "SERVICESPORT",
          HBA: "HBA",
          SANSWITCHNAME: "SANSWITCHNAME",
          SANSWITCHTOHBA: "SANSWITCHTOHBA",
          SANSWITCHTOCC: "SANSWITCHTOCC",
          STORENAME: "STORENAME",
          STOREPORT: "STOREPORT",
        },
      ],
      dataTotal: 0,
      curPage: 1,
      pageSize: 10,
      tableColumns: tableColumns,
    };
  },
  computed: {
    tableDataFieldsFn: function() {
      // return this.tableColumns.filter((item) => item.isShow );
      let _jsonfields = {};
      this.tableColumns.filter((item) => {
        if (item.isShow) {
          _jsonfields[item.label] = item.prop;
        }
      });

      return _jsonfields;
    },
  },
  methods: {
    getTableData() {},
    getPaginationCurPage(val) {
      this.curPage = val;
      this.getTableData();
    },
    getPaginationPageSize(val) {
      this.pageSize = val;
      this.getTableData();
    },
    getChangeLie(val) {
      // 遍历表格列
      this.tableColumns.map((item, index) => {
        // 列的显示隐藏状态改变
        item.isShow = val.includes(item.label);
      });
    },
    exportData(){},
    handleAdd(){

    }
  },
};
</script>

<style lang="scss" scoped>
.topologyManageCon {
  padding: 10px;
}
</style>
